<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .cell td {
            width: 100px;
            height: 100px;
        }
        .red-bg {
            background-color: #e15761;
        }
    </style>
</head>
<body>
    <p class="time"></p>
    <table border="1" class="cell">
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>
    <script>
        var num = 30;
        var pEl = document.querySelector('.time');
        var table = document.querySelector('.cell');
        var timerCell;
        window.onload = function() {
            setInterval(function() {
                if(num >= 1) {
                    pEl.innerHTML = '敌军还有<span class=red>'+ num -- +'</span>秒到达战场'
                }
            }, 1000);
            // 九宫格抽奖
            cell()
        }
        function cell () {
            // 初始化，给第一排第一个单元格涂上红色
            table.firstElementChild.firstElementChild.firstElementChild.className = 'red-bg';
            timerCell = setInterval(function() {
                // debugger
                // 先把老的移除class名，再加给新的。击鼓传花，传递的是class名字
                var currentEl = document.querySelector('.red-bg');
                // 移除class
                currentEl.removeAttribute('class');
                // 相邻节点元素
                if(currentEl.nextElementSibling) {
                    // 有相邻节点说明这一行还没遍历完，就可以直接给下一个元素
                    currentEl.nextElementSibling.className = 'red-bg'
                }else {
                    // 当前td是某一行的最后一个td，所以没有相邻元素，就要找父元素的相邻元素的第一个子元素
                    if(currentEl.parentElement.nextElementSibling) {
                        currentEl.parentElement.nextElementSibling.firstElementChild.className = 'red-bg';
                    }else {
                        // 如果父元素没有相邻元素了，说明到头了，就结束游戏
                        clearInterval(timerCell);
                    }
                }
            }, 800)
        }
    </script>
</body>
</html>